<template>
  <div class="search">
    <input type="text"
           placeholder="请输入商家或店铺名称"
           v-model="keyword">
    <button @click="action">提交</button>
    <div class="searchlist" v-for="(item, index) in list" :key="index">
    <ShopList2 :datas="item"/>
    </div>
    <Foot/>
  </div>
</template>
<script>
import ShopList2 from "../components/compoents_B/ShopList2_B"
import Foot from "../components/footBar_comm"
export default {
  name: "Search_B",
  data () {
    return {
      tra: null,
      keyword: null,
      list: null,
    };

  },
   components: {
    ShopList2,
    Foot
  },
   methods:{
  action() {
    this.tra = JSON.parse(localStorage.getItem("tra"));
    console.log(JSON.parse(localStorage.getItem("tra")))
    this.$axios.get("https://elm.cangdu.org/v4/restaurants", {
      params: {
        geohash: this.tra.geohash,
        keyword: this.keyword,
      }
    }).then(res => {
      this.list = res;
      console.log(this.list)
     
    }).catch(err => console.log(err))
  }
}
}
</script>
<style lang="less">
.search {
  background-color: white;
  height: 60px;

  input {
    height: 40px;
    width: 250px;
    background-color: #f5f5f5;
    border: 0;
    outline: none;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 10px;
    padding-left: 5px;
    color: #333;
    font-weight: 600;
  }
  button {
    width: 90px;
    height: 40px;
    margin-left: 10px;
    border: 0;
    outline: none;
    border-radius: 5px;
    background-color: #3190e8;
    color: white;
  }
}
.searchlist{
  width: 100%;
  height: 110px;
  //background-color: blue;
}
</style>